<template>
  <div class="incomeComp">
    <div class="radar">
      <div class="workTopTitle">
        <div class="fl">
          <div class="title">{{ leftTitle }}</div>
        </div>
      </div>
      <div class="radarArea">
        <div class="chartsArea">
          <div class="barContainer">
            <!--  <bar :barData="barData" :areaName="areaName"></bar> -->
            <lineDataNew
              :completeData="completeData"
              :name="areaName"
            ></lineDataNew>
          </div>
        </div>
        <!--      <div class="detailList">
        <ul>
          <li v-for="(item,index) in areaDataList" :key="index" :style="{color:item.color}"><span>{{item.areaName}}</span><span>{{item.thisYearLj}}</span><span>{{item.hbAmt}}</span></li>
        </ul>
      </div> -->
      </div>
    </div>
    <div class="table">
      <div class="workTopTitle">
        <!-- <div class="fr" v-if="chartsState == 2"> -->
        <div class="fr">
          <div class="option">
            <div>
              <p>业务：</p>
              <el-select
                style="width: 150px"
                v-model="barSelect"
                value-key="id"
                placeholder="请选择"
                @change="changeType"
              >
                <el-option
                  v-for="item in barTable"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </div>
            <div>
              <p>区域：</p>
              <!-- <el-select
                style="width: 150px"
                v-model="areaSelect2"
                value-key="areaId"
                placeholder="选择区域"
                @change="changeArea"
              >
                <el-option
                  v-for="item in areaList"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item"
                ></el-option>
              </el-select> -->

              <el-select style="width: 150px"  @change="changeArea" v-model="form.areaId">
                <el-option
                  v-for="item in areaList"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                ></el-option>
              </el-select>
            </div>
          </div>
          <p>单位：{{ unitName }}</p>
        </div>
      </div>
      <div class="tableContainer">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          style="width: 100%"
          height="260px"
          class="tableTh28"
          ref="table"
        >
          <el-table-column label="年度完成率排名" width="70" align="center">
            <template slot-scope="scope">
              <img
                src="~@/assets/images/common/first.png"
                alt
                v-if="scope.$index == 1"
              />
              <img
                src="~@/assets/images/common/second.png"
                alt
                v-else-if="scope.$index == 2"
              />
              <img
                src="~@/assets/images/common/third.png"
                alt
                v-else-if="scope.$index == 3"
              />
              <span v-else>{{ scope.$index }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, index) in titleList"
            :key="index"
            :prop="item.prop"
            :label="item.name"
            :align="item.align"
            :width="item.width"
            show-overflow-tooltip
            min-width="60"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import bar from "./echarts/bar";
import lineDataNew from "./echarts/lineDataNew";

import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
export default {
  name: "incomeCompare",
  components: {
    bar,
    lineDataNew,
  },
  data() {
    return {
      form: {
        areaId: '',
      },
      tableLoading: false,
      areaSelect: {
        areaId: "",
        areaName: "",
      },
      currentTime: "",
      leftTitle: "分区域完成",
      // rightTitle: "区域排名",
      areaSelect2: {
        areaId: "",
        areaName: "",
      },
      barSelect: {
        name: "",
        id: "1",
      },
      areaList: [],
      areaName: "",
      tableData: [],
      titleList: [],
      areaDataList: [],
      completeData: {},
      unitName: "万元",
      barTable: [
        {
          name: "主营业务",
          id: "1",
        },
        {
          name: "基本面",
          id: "2",
        },
        {
          name: "产数省内",
          id: "3",
        },
        {
          name: "移动净增",
          id: "4",
        },
        {
          name: "移动新增",
          id: "5",
        },
        {
          name: "宽带净增",
          id: "6",
        },
        {
          name: "宽带新增",
          id: "7",
        },
        {
          name: "天翼高清净增",
          id: "8",
        },
        {
          name: "天翼高清新增",
          id: "9",
        },
      ],
      barSortTitle: [
        {
          name: "区域",
          prop: "areaName",
          // width: 90,
          align: "center",
        },
        {
          name: "年累计",
          align: "center",
          prop: "thisYearLj",
        },
        {
          name: "同比",
          align: "center",
          prop: "tbYearIncreaseRatePercent",
        },
        {
          name: "年度完成率",
          align: "center",
          prop: "completeLjRatePercent",
        },
        {
          name: "当月完成",
          prop: "thisMonthValue",
          align: "center",
        },
        {
          name: "环比",
          align: "center",
          prop: "hbAmt",
        },
      ],
      barData: [],
      radarData: {},
      accountInfo: "",
    };
  },
  mounted() {
    var that = this;

    this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    this.areaSelect.areaId = this.accountInfo.areaId;
    this.form.areaId = that.accountInfo.areaId;
   // this.areaSelect2.areaName = this.accountInfo.areaName;
    this.areaName = this.accountInfo.areaName;
    this.init();
    that.$bus.$on("message", (msg) => {
      console.log(111111111111)
      that.form.areaId = msg.areaId + '';
      that.areaName = msg.areaName;
      that.getLineData();

      // this.getCompanyByLvl();
      // this.getLineData();
      // that.init();
    });
  },
  methods: {
    changeType(val) {
      switch (Number(val.id)) {
        case 1:
        case 2:
        case 3:
          break;
        case 4:
        case 5:
        case 6:
        case 7:
        case 8:
        case 9:
          break;
      }
      this.getLineData();
    },
    changeArea(val) {
      var that = this;

        that.areaName = val.areaName;
        that.getLineData();
    },
    //获取柱状图数据
    getLineData() {
      var that = this;
      that.tableLoading = true;

      $budgetAPI.getLineData(
        {
          tjType: that.barSelect.id,
          areaId: that.form.areaId,
        },
        (res) => {
          this.tableLoading = false;
          if (res.code == 0) {
            this.tableData = res.content.data;
            this.unitName = res.content.unit;
            this.completeData = [];
            let obj = {
              xAxis: [],
              yAxis: [],
            };
            res.content.sortData.map((item, index) => {
              obj.xAxis[index] = item.areaName;
              obj.yAxis[index] = item.completeLjRatePercent.split("%")[0];
            });
            this.completeData = obj;
            let a = res.content.acctMonth;
            this.currentTime =
              a.substring(0, 4) + "年" + a.substring(4, 6) + "月";
            // var colorList = [
            //         '#7f92f7', '#7ba5f4', '#69bdfb', '#61d1eb','#53dda3',
            //         '#29aa74', '#6edd53', '#9ef90c','#d2dd53', '#eadf55', '#f4c178',
            //         '#f48892'
            //     ];
            // this.barData=[];
            // this.barData.push(res.content.data);
            // this.barData.push(this.areaName);
            // this.barData.push(res.content.currentData)
            // res.content.data.map((item,index)=>{
            //   item['color']=colorList[index]
            // })

            this.areaDataList = res.content.sortData;
          } else {
            this.alertError(res);
          }
        },
        (err) => {}
      );
    },
    // changeRadar(val) {
    //   this.getRadarData();
    // },
    //根据层级获取区域树
    getCompanyByLvl() {
      var that = this;
      $budgetAPI.getCompanyByLvl(
        {
          lvl: that.accountInfo.areaLvl,
          areaId: that.accountInfo.areaId,
        },
        (res) => {
          that.alertError(res);
          res.content.unshift(that.accountInfo);
          that.areaList = res.content;
        },
        (err) => {}
      );
    },
    init() {
      this.titleList = this.barSortTitle;
      this.getCompanyByLvl();
      this.getLineData();
    },
  },
};
</script>

<style lang="scss" scoped>
.incomeComp {
  margin-top: 20px;
  width: 100%;
  height: 320px;
  border-radius: 5px;
  background-color: #ffffff;
  border: 1px solid #dee5f3;
  display: flex;
  .radar {
    width: 50%;
    height: 100%;

    // border-right: 1px solid #dee5f3;
    .chartsSwitch {
      width: 72px;
      height: 27px;
      line-height: 25px;
      margin-top: 8px;
      text-align: center;
      border: 1px solid #dee5f3;
      border-radius: 3px;
      display: flex;
      overflow: hidden;
      span {
        width: 35px;
        cursor: pointer;
        display: inline-block;
        &.active {
          background-color: #00b7ee;
          color: #ffffff;
        }
      }
    }
    .radarArea {
      display: flex;
      .chartsArea {
        padding: 10px 20px;
        height: 280px;
        width: 100%;
        .radarContainer {
          width: 100%;
          height: 100%;
          position: relative;
          .option {
            width: 100%;
            position: absolute;
            top: 0;
            z-index: 88;
            display: flex;
            justify-content: flex-end;
          }
        }
        .barContainer {
          width: 100%;
          height: 100%;
          position: relative;
          .option {
            width: 100%;
            position: absolute;
            top: 0;
            z-index: 88;
            display: flex;
            justify-content: space-between;
            p {
              line-height: 28px;
              margin-right: 20px;
            }
          }
        }
      }
      .detailList {
        width: 55%;
        padding-top: 30px;
        ul {
          height: 230px;
          overflow-y: auto;
        }
        li {
          list-style: disc;
          line-height: 37px;
          height: 37px;
          float: left;
          width: 50%;
          span {
            color: #66709a;
            padding: 0 5px;
            font-size: 12px;
            &:first-child {
              font-weight: 700;
            }
          }
        }
      }
    }
  }
  .table {
    width: 50%;
    height: 100%;
    padding-right: 10px;
    .workTopTitle {
      .fr {
        div,
        p {
          display: inline-block;
        }
      }
    }
    .tableContainer {
      padding: 5px 0 10px 5px;
      height: 260px;
      overflow: hidden;
      /deep/ .el-table tbody tr:first-child td:first-child .cell {
        display: none;
      }
      /deep/ .el-table::before {
        height: 0;
      }
    }
  }
}
</style>
<style lang="scss">
.incomeComp {
  .option {
    .el-input__inner {
      padding: 0 14px;
      height: 28px;
      line-height: 28px;
      font-size: 12px;
      vertical-align: middle;
      border-radius: 5px;
    }
    .el-input__icon {
      line-height: 28px;
    }
  }
  .tableContainer {
    padding: 5px 0 10px 5px;
    height: 260px;
    overflow: hidden;
    .el-table th {
      background-color: #f8f9fb !important;
    }
    .el-table td,
    .el-table th.is-leaf {
      border-bottom: none;
    }
    .el-table tr td:first-child .cell span {
      line-height: 20px;
      border-radius: 100px;
      background-color: #f0f2f5;
      height: 20px;
      width: 20px;
      display: inline-block;
    }
  }
}
</style>
